<template>
<div>
<el-col :span="24">
  <el-row> 
    <el-col :span="24"><div class="grid-content">
      <el-col :span="12">
        <el-input v-model="filters[0].value" placeholder="搜索框"></el-input>  
      </el-col>
      &nbsp;&nbsp;<el-button type="primary" @click="add1">新增条目</el-button>

        <data-tables :data="data" :filters="filters" :action-col="actionCol">
          <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.prop"   sortable="custom" >
          </el-table-column>
        </data-tables>
      </div></el-col>
  </el-row>


  <el-dialog title="修改字段" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="外网地址" :label-width="formLabelWidth">
        <el-input v-model="form.outaddress" autocomplete="off" disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="外网端口" :label-width="formLabelWidth">
        <el-input v-model="form.outport" autocomplete="off" disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="内网地址" :label-width="formLabelWidth">
        <el-input v-model="form.inputaddress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="内网端口" :label-width="formLabelWidth">
        <el-input v-model="form.inputport" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开通时间" :label-width="formLabelWidth">
        <el-date-picker v-model="form.starttime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" :label-width="formLabelWidth">
        <el-date-picker v-model="form.endtime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>

      <el-form-item label="服务名称" :label-width="formLabelWidth">
        <el-input v-model="form.servicename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="申请人员" :label-width="formLabelWidth">
        <el-input v-model="form.people" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="服务器" :label-width="formLabelWidth">
        <el-input v-model="form.server" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="服务器维护人" :label-width="formLabelWidth">
        <el-input v-model="form.serverpeople" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="input">确 定</el-button>
    </div>
  </el-dialog>


  <el-dialog title="新增字段" :visible.sync="dialogFormVisible1">
    <el-form :model="form">
      <el-form-item label="内外网ip端口,四段空格隔开" :label-width="formLabelWidth">
        <el-input  type="textarea"  rows="6" v-model="form.outaddress" placeholder="1.1.1.1 8080 2.2.2.2 8080
1.1.1.1 8080 2.2.2.2 8080" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开通时间" :label-width="formLabelWidth">
      <el-date-picker v-model="form.starttime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" :label-width="formLabelWidth">
      <el-date-picker v-model="form.endtime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>

      <el-form-item label="服务名称" :label-width="formLabelWidth">
        <el-input v-model="form.servicename" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="申请人员" :label-width="formLabelWidth">
        <el-input v-model="form.people" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="服务器" :label-width="formLabelWidth">
        <el-input v-model="form.server" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="服务器维护人" :label-width="formLabelWidth">
        <el-input v-model="form.serverpeople" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="input">确 定</el-button>
    </div>
  </el-dialog>
</el-col>
</div>
</template>

<script>
import { vue_networkip, vue_networkip_post, vue_networki_delete } from '@/api/query'

export default {
  data() {
    return {

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

      show: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
          outaddress: '',
          outport: '',
          inputaddress:'',
          inputport: '',
          starttime: '',
          endtime:'',
          day: '',
          servicename: '',
          people:'',
          server: '',
          serverpeople: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        formLabelWidth: '120px',
        formLabelHeight: '80px',
      data: [
      ],
      titles: [{
        prop: 'outaddress',
        label: '外网地址'
      },{
        prop: 'outport',
        label: '外网端口'	
      },{
        prop: 'inputaddress',
        label: '内网地址'
      },{
        prop: 'inputport',
        label: '内网端口'
      },{
        prop: 'starttime',
        label: '开通时间'
      },{
        prop: 'endtime',
        label: '结束时间'
      },{
        prop: 'day',
        label: '天数'
      },{
        prop: 'servicename',
        label: '服务名称'
      },{
        prop: 'people',
        label: '申请人员'
      },{
        prop: 'server',
        label: '服务器'
      },{
        prop: 'serverpeople',
        label: '服务器维护人'
      }],
      actionCol: {
              label: '操作',
              props: {
                align: 'center',
              },
              buttons: [{
                props: {
                  type: 'primary',
                  icon: 'el-icon-edit'
                },
                handler: row => {
                  this.dialogFormVisible = true
                  console.log(row);
                  this.form.outaddress = row.outaddress
                  this.form.outport = row.outport
                  this.form.inputaddress = row.inputaddress
                  this.form.inputport = row.inputport
                  this.form.starttime = row.starttime
                  this.form.endtime = row.endtime
                  this.form.day = row.day
                  this.form.servicename = row.servicename
                  this.form.people = row.people
                  this.form.server = row.server
                  this.form.serverpeople = row.serverpeople
                },
                label: 'Edit'
              }, {
                handler: row => {
                  this.data.splice(this.data.indexOf(row), 1),
                  console.log(row.name)
                  this.$message('outaddress: '+row.outaddress+'删除完毕')
                  var param={outaddress : row.outaddress, outport : row.outport}
                  console.log(param);
                  vue_networki_delete(param).then(response => {
                     console.log(response.data)
                 })
                //   this.$axios.delete("/sun/api/vue_networki_delete",{data: param})
                //   .then(res => {
                //     console.log(res.data);
                //   })
                //   .catch(error => {
                //     console.log(error);
                //   })
                },
                label: 'delete'
              }]
            },
      filters: [
        {
          prop: ['outaddress','outport','inputaddress','inputport','starttime','endtime','day','servicename','people','server','serverpeople'],
          value: '',  
        }
      ],
      
    }
  },
  created() {    
    this.vue_networkip() 
  },
	methods: {
        vue_networkip(){
            vue_networkip().then(response => {
                console.log(response.data)
                this.data = response.data
            })
        },

        input() {
            vue_networkip_post({ 
                "outaddress": this.form.outaddress,
                "outport":this.form.outport,
                "inputaddress":this.form.inputaddress,
                "inputport": this.form.inputport,
                "starttime":this.form.starttime,
                "endtime":this.form.endtime,
                "day": this.DateDiff(this.form.starttime,this.form.endtime),
                "servicename":this.form.servicename,
                "people":this.form.people,
                "server": this.form.server,
                "serverpeople":this.form.serverpeople,
                }).then(response => {
                console.log(response.data)
                this.vue_networkip();
        })
          this.dialogFormVisible = false
          this.dialogFormVisible1 = false
          console.log(this.form.starttime)
          console.log(this.form.endtime)
          this.DateDiff(this.form.starttime,this.form.endtime)
        },
//     input(){
//             this.$axios.post("/sun/api/vue_networki_post",qs.
//             stringify({
//                 outaddress: this.form.outaddress,
//                 outport:this.form.outport,
//                 inputaddress:this.form.inputaddress,
//                 inputport: this.form.inputport,
//                 starttime:this.form.starttime,
//                 endtime:this.form.endtime,
//                 day: this.DateDiff(this.form.starttime,this.form.endtime),
//                 servicename:this.form.servicename,
//                 people:this.form.people,
//                 server: this.form.server,
//                 serverpeople:this.form.serverpeople,
//             }))
//           .then(res=> { 
//               console.log(res.data)
//               this.fromget();
//           })
//           .catch(error => {
//               console.log(error);
//           })
//           this.dialogFormVisible = false
//           this.dialogFormVisible1 = false
//           console.log(this.form.starttime)
//           console.log(this.form.endtime)
//           this.DateDiff(this.form.starttime,this.form.endtime)

//   },
    add(){
      this.form.outaddress = '',
      this.form.outport= '',
      this.form.inputaddress='',
      this.form.inputport= '',
      this.form.starttime= '',
      this.form.endtime='',
      this.form.day= '',
      this.form.servicename= '',
      this.form.people='',
      this.form.server= '',
      this.form.serverpeople=''
      this.dialogFormVisible = true
  },
    add1(){
      this.form.outaddress = '',
      this.form.outport= '',
      this.form.inputaddress='',
      this.form.inputport= '',
      this.form.starttime= '',
      this.form.endtime='',
      this.form.day= '',
      this.form.servicename= '',
      this.form.people='',
      this.form.server= '',
      this.form.serverpeople=''
      this.dialogFormVisible1 = true
  },
// fromget(){
//     this.$axios.get("/sun/api/vue_networkip")
//     .then(res => {
//       console.log(res.data.ret);
//       this.data = res.data.ret
//     })
//     .catch(error => {
//       console.log(error);
//     })
//   },
DateDiff(sDate1, sDate2){    
     var  aDate,  oDate1,  oDate2,  iDays  
     aDate   =  sDate1.split("-")  
     oDate1 = new Date(aDate[0] , aDate[1] ,aDate[2])    //转换为12-18-2006格式  
     aDate   =  sDate2.split("-")  
     oDate2 = new Date(aDate[0] , aDate[1] , aDate[2])  
     iDays   =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数  
     return iDays
},
},
//   mounted() {
//     window.addEventListener('load', () => { 
//           if (this.$route.path !== '/') {
//                 this.$router.replace('/')
//           }
//     })
// },
}
</script>
<style>
</style>